use dioxus::prelude::*;

use crate::app::Route;

#[component]
pub fn SideBar() -> Element {
    rsx! {
        div { class: "w-[220px] border-r border-gray-200 bg-white",
            div {
                    class: "relative overflow-hidden h-full",
                    dir: "ltr",
                    style: "position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px",

                    div {
                        class: "h-full w-full rounded-[inherit]",
                        "data-radix-scroll-area-viewport": "",
                        style: "overflow: hidden scroll;",
                        div { style: "min-width:100%;display:table",
                            div { class: "p-4 space-y-6",
                                div { class: "space-y-2",
                                    h3 { class: "text-xs font-semibold text-gray-500 uppercase tracking-wider px-2",
                                        "HTTP 工具"
                                    }
                                    div { class: "space-y-1",
                                        // curl转python
                                        Bar { to:Route::CurlToPython,text:"curl → Python".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-code-xml h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                path { d: "m18 16 4-4-4-4" }
                                                path { d: "m6 8-4 4 4 4" }
                                                path { d: "m14.5 4-5 16" }
                                            }
                                        }
                                        }
                                        // curl转rust
                                        Bar { to:Route::CurlToRust,text:"curl → Rust".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-code-xml h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                path { d: "m18 16 4-4-4-4" }
                                                path { d: "m6 8-4 4 4 4" }
                                                path { d: "m14.5 4-5 16" }
                                            }
                                        }
                                        }
                                        // cookies格式化
                                        Bar { to:Route::CookieFormat,text:"Cookies 格式化".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-cookie h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                path { d: "M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" }
                                                path { d: "M8.5 8.5v.01" }
                                                path { d: "M16 15.5v.01" }
                                                path { d: "M12 12v.01" }
                                                path { d: "M11 17v.01" }
                                                path { d: "M7 14v.01" }
                                            }
                                        }
                                        }

                                    }
                                }
                                div { class: "space-y-2",
                                    h3 { class: "text-xs font-semibold text-gray-500 uppercase tracking-wider px-2",
                                        "加/解密"
                                    }
                                    div { class: "space-y-1",

                                        //aes 加密
                                        Bar { to:Route::AesEnDecryptor,text:"AES 加/解密".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-shield h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                path { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }
                                            }
                                        }
                                        }
                                        //aes 加密
                                        Bar { to:Route::CryptoSuite,text:"RSA 加/解密".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-lock h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                rect {
                                                    height: "11",
                                                    rx: "2",
                                                    ry: "2",
                                                    width: "18",
                                                    x: "3",
                                                    y: "11",
                                                }
                                                path { d: "M7 11V7a5 5 0 0 1 10 0v4" }
                                            }
                                        }
                                        }




                                    }
                                }
                                div { class: "space-y-2",
                                    h3 { class: "text-xs font-semibold text-gray-500 uppercase tracking-wider px-2",
                                        "编码 / 解码"
                                    }
                                    div { class: "space-y-1",
                                        // baes 编码
                                        Bar { to:Route::Base64Encode,text:"BASE64 编码".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-hash h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                line {
                                                    x1: "4",
                                                    x2: "20",
                                                    y1: "9",
                                                    y2: "9",
                                                }
                                                line {
                                                    x1: "4",
                                                    x2: "20",
                                                    y1: "15",
                                                    y2: "15",
                                                }
                                                line {
                                                    x1: "10",
                                                    x2: "8",
                                                    y1: "3",
                                                    y2: "21",
                                                }
                                                line {
                                                    x1: "16",
                                                    x2: "14",
                                                    y1: "3",
                                                    y2: "21",
                                                }
                                            }
                                        }
                                        }
                                        // base64解码
                                        Bar { to:Route::Base64Decode,text:"BASE64 解码".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-hash h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                line {
                                                    x1: "4",
                                                    x2: "20",
                                                    y1: "9",
                                                    y2: "9",
                                                }
                                                line {
                                                    x1: "4",
                                                    x2: "20",
                                                    y1: "15",
                                                    y2: "15",
                                                }
                                                line {
                                                    x1: "10",
                                                    x2: "8",
                                                    y1: "3",
                                                    y2: "21",
                                                }
                                                line {
                                                    x1: "16",
                                                    x2: "14",
                                                    y1: "3",
                                                    y2: "21",
                                                }
                                            }
                                        }
                                        }
                                        // url编码
                                        Bar { to:Route::UrlEncode,text:"url 编码".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-globe h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                circle { cx: "12", cy: "12", r: "10" }
                                                path { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }
                                                path { d: "M2 12h20" }
                                            }
                                        }
                                        }


                                        // url解码
                                        Bar { to:Route::UrlDecode,text:"url 解码".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-globe h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                circle { cx: "12", cy: "12", r: "10" }
                                                path { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }
                                                path { d: "M2 12h20" }
                                            }
                                        }
                                        }
                                        // hex编码
                                        Bar { to:Route::HexEncode,text:"hex 编码".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-hash h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                line {
                                                    x1: "4",
                                                    x2: "20",
                                                    y1: "9",
                                                    y2: "9",
                                                }
                                                line {
                                                    x1: "4",
                                                    x2: "20",
                                                    y1: "15",
                                                    y2: "15",
                                                }
                                                line {
                                                    x1: "10",
                                                    x2: "8",
                                                    y1: "3",
                                                    y2: "21",
                                                }
                                                line {
                                                    x1: "16",
                                                    x2: "14",
                                                    y1: "3",
                                                    y2: "21",
                                                }
                                            }
                                        }
                                        }

                                        // hex解码
                                        Bar { to:Route::HexDecode,text:"hex 解码".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-hash h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                line {
                                                    x1: "4",
                                                    x2: "20",
                                                    y1: "9",
                                                    y2: "9",
                                                }
                                                line {
                                                    x1: "4",
                                                    x2: "20",
                                                    y1: "15",
                                                    y2: "15",
                                                }
                                                line {
                                                    x1: "10",
                                                    x2: "8",
                                                    y1: "3",
                                                    y2: "21",
                                                }
                                                line {
                                                    x1: "16",
                                                    x2: "14",
                                                    y1: "3",
                                                    y2: "21",
                                                }
                                            }
                                        }
                                        }
                                    }
                                }

                                div { class: "space-y-2",
                                    h3 { class: "text-xs font-semibold text-gray-500 uppercase tracking-wider px-2",
                                        "数据工具"
                                    }
                                    div { class: "space-y-1",
                                        // 数据差异/比较
                                        Bar { to:Route::TextDiff,text:"数据差异/比较".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-git-compare h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                circle { cx: "18", cy: "18", r: "3" }
                                                circle { cx: "6", cy: "6", r: "3" }
                                                path { d: "M13 6h3a2 2 0 0 1 2 2v7" }
                                                path { d: "M11 18H8a2 2 0 0 1-2-2V9" }
                                            }
                                        }
                                        }
                                        //url查询参数分析器
                                        Bar { to:Route::UrlFormat,text:"url查询参数分析".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-search h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                circle { cx: "11", cy: "11", r: "8" }
                                                path { d: "m21 21-4.3-4.3" }
                                            }
                                        }
                                        }
                                        // ua生成
                                        Bar { to:Route::UaGenerator,text:"User-Agent 生成".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-user h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                path { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }
                                                circle { cx: "12", cy: "7", r: "4" }
                                            }
                                        }
                                        }
                                        // json查找器
                                        Bar { to:Route::JsonFinder,text:"JSON 查找器".to_string(),svg:rsx!{
                                            svg {
                                                class: "lucide lucide-file-text h-4 w-4 mr-3 flex-shrink-0",
                                                fill: "none",
                                                height: "24",
                                                stroke: "currentColor",
                                                stroke_linecap: "round",
                                                stroke_linejoin: "round",
                                                stroke_width: "2",
                                                view_box: "0 0 24 24",
                                                width: "24",
                                                xmlns: "http://www.w3.org/2000/svg",
                                                path { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }
                                                path { d: "M14 2v4a2 2 0 0 0 2 2h4" }
                                                path { d: "M10 9H8" }
                                                path { d: "M16 13H8" }
                                                path { d: "M16 17H8" }
                                            }
                                        }
                                        }
                                    }
                                }

                            }
                        }
                    }
                }



            }
    }
}

#[component]
pub fn Bar(to: Route, text: String, svg: Element) -> Element {
    let current_page = use_route::<Route>();
    let is_active = current_page == to;
    let class_name = if is_active {
        "w-full flex items-center px-3 py-2 text-sm rounded-lg transition-all duration-200 group bg-blue-50 text-blue-700 border-l-2 border-blue-500"
    } else {
        "text-gray-700 hover:bg-gray-50 hover:text-gray-900"
    };

    rsx! {
            Link {
                 key: "{to:?}", // 👈 添加唯一 key
                to: to.clone(),
                class: format!("w-full flex items-center px-3 py-2 text-sm rounded-lg transition-all duration-200 group {}",class_name) ,
                {svg}
                span { class: "flex-1 text-left", {text} }
                if is_active {

                    svg {
                        class: "lucide lucide-chevron-right h-3 w-3 text-blue-500",
                        fill: "none",
                        height: "24",
                        stroke: "currentColor",
                        stroke_linecap: "round",
                        stroke_linejoin: "round",
                        stroke_width: "2",
                        view_box: "0 0 24 24",
                        width: "24",
                        xmlns: "http://www.w3.org/2000/svg",
                        path { d: "m9 18 6-6-6-6" }
                    }


            }
        }

    }
}
